<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css"/>
    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>
    <!-- 导入模板引擎 -->
    <script src="./lib/template-web.js"></script>
</head>

<body>
<div class="container">
    <!-- Logo -->
    <img src="./images/taobao_logo.png" alt="" class="logo"/>

    <div class="box">
        <!-- tab 栏 -->
        <div class="tabs">
            <div class="tab-active">宝贝</div>
            <div>店铺</div>
        </div>
        <!-- 搜索区域（搜索框和搜索按钮） -->
        <div class="search-box">
            <input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容"/>
            <button class="btnSearch">
                搜索
            </button>
        </div>
        <!-- 搜索建议列表 -->
        <div id="suggest-list"></div>
    </div>
</div>

<!-- 模板结构 -->
<script type="text/html" id="tpl-suggestList">
    {{each result}}
    <!--搜索建议项-->
    <div class="suggest-item">{{$value[0]}}</div>
    {{/each}}
</script>

<script>
    $(function () {
        // 1. 定义延时器的Id
        var timer = null
        // 定义全局缓存对象
        var cacheObj = {}

        // 2. 定义防抖的函数
        function debounceSearch(kw) {
            timer = setTimeout(function () {
                getSuggestList(kw)
            }, 500)
        }

        // 为输入框绑定 keyup 事件
        $('#ipt').on('keyup', function () {
            // 3. 清空 timer
            clearTimeout(timer)
            var keywords = $(this).val().trim()
            if (keywords.length <= 0) {
                return $('#suggest-list').empty().hide()
            }

            // 先判断缓存中是否有数据
            if (cacheObj[keywords]) {
                return renderSuggestList(cacheObj[keywords])
            }

            // TODO:获取搜索建议列表
            // console.log(keywords)
            // getSuggestList(keywords)
            debounceSearch(keywords)
        })

        function getSuggestList(kw) {
            $.ajax({
                url: 'https://suggest.taobao.com/sug?q=' + kw,
                dataType: 'jsonp',
                success: function (res) {
                    // console.log(res)
                    renderSuggestList(res)
                }
            })
        }

        // 渲染UI结构
        function renderSuggestList(res) {
            if (res.result.length <= 0) {
                return $('#suggest-list').empty().hide()
            }
            var htmlStr = template('tpl-suggestList', res)
            $('#suggest-list').html(htmlStr).show()

            // 1. 获取到用户输入的内容，当做键
            var k = $('#ipt').val().trim()
            // 2. 需要将数据作为值，进行缓存
            cacheObj[k] = res
        }
    })
</script>
</body>

</html>
